<template>
  <div id='QYLDchart' style="width: 500px;height:200px;margin:0 auto;"></div>
</template>

<script>
  import echarts from 'echarts'
  import {QYLDFUNNELDATA} from '@/../static/js/apis.js'

  export default {
    name: "QYLDchart",
    methods: {
      //绘制图形
      drawChart(funnelData) {
        let myChart = echarts.init(document.getElementById('QYLDchart'))
        let options = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}家"
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['国有', '私营', '合资', '独资', '股份制', '有限责任制']
          },
          height: "80%",
          calculable: true,
          series: [{
            name: '企业类型',
            type: 'funnel',
            sort: 'ascending',
            top: "0",
            itemStyle: {
              normal: {
                label: {
                  position: 'left'
                }
              }
            },
            gap: 2,
            data: funnelData
          }]
        }
        myChart.setOption(options, true)
      },
      //获取数据
      getData() {
        const self = this;
        QYLDFUNNELDATA('', function (res) {
          if (res.funnelData) {
            //绘制图形
            self.drawChart(res.funnelData);
          }
        })
      }
    },
    mounted() {
      this.getData();
    }
  }

</script>

<style scoped>

</style>
